
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>G4F Demo</title>
    <link rel="apple-touch-icon" sizes="180x180" href="dist/img/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="dist/img/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="dist/img/favicon-16x16.png">
    <link rel="manifest" href="/dist/img/site.webmanifest">
    <script src="dist/js/framework.js"></script>
    <style>
        :root {
            --colour-1: #000000;
            --colour-2: #ccc;
            --colour-3: #e4d4ff;
            --colour-4: #f0f0f0;
            --colour-5: #181818;
            --colour-6: #242424;
            --accent: #8b3dff;
            --gradient: #1a1a1a;
            --background: #16101b;
            --size: 70vw;
            --top: 50%;
            --blur: 40px;
            --opacity: 0.6;
        }

        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

        /* Body and text color */
        body {
            background: var(--background);
            color: var(--colour-3);
            font-family: "Inter", sans-serif;
            height: 100vh;
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-weight: bold;
        }

        iframe {
            background: transparent;
            width: 100%;
            border: none;
        }

        #background {
            height: 100%;
            position: absolute;
            top: 0;
        }

        .hidden {
            display: none;
        }

        .stream-container {
            max-height: 0;
            transition: max-height 0.15s ease-out;
            color: var(--colour-5);
            overflow: scroll;
            text-align: left;
        }

        .stream-container.show {
            max-height: 100%;
            height: 100%;
            transition: max-height 0.25s ease-in;
            background: rgba(255,255,255,0.7);
            padding: 0 1rem;
        }

        .stream-container img {
            max-width: 320px;
            display: block;
        }

        .stream-container, .stream-widget {
            width: 100%;
            position: fixed;
            position: absolute;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000001;
            background-color: #fff;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

    </style>
    <script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.1/dist/markdown-it.min.js"></script>
</head>
<body>
    <div class="stream-container"></div>
    <iframe class="stream-widget hidden"></iframe>
    <script>
        const streamWidget = document.querySelector('.stream-widget');
        const streamContainer = document.querySelector('.stream-container');
        const updateContent = async () => {
            //await window.connectToBackend();
            let prompt = window.location.hash.replace("#", "");
            prompt = prompt || `Generate a website (html) in language (${navigator.language}) for gpt4free (G4F)`;
            const url = `${window.backendUrl}/backend-api/v2/create?prompt=${encodeURIComponent(prompt)}&stream=1&cache=1&provider=DeepSeekAPI`;
            const response = await fetch(url);
            const text = await response.text()
            if (text /*&& text.indexOf('"error"') < 0*/) {
                const html = filterMarkdown(text, "html");
                if (html) {
                    streamWidget.src = `data:text/html;charset=utf-8,${encodeURIComponent(html)}`;
                    streamContainer.classList.remove("show");
                    streamWidget.classList.remove('hidden');
                } else {
                    streamWidget.classList.add('hidden');
                    streamContainer.classList.add("show");
                    streamContainer.innerHTML = renderMarkdown(filterMarkdown(text, "markdown", text));
                }
            }
        };
        window.addEventListener("hashchange", updateContent);
        updateContent();
    </script>
</body>
</html>